<template>
  <div class="fullOperation">
    <div class="become-full">
      <el-button type="primary"
                 :disabled="becomeFullArray.length===0"
                 @click="confirmBecomeFull">转正确认
      </el-button>
    </div>
    <my-search></my-search>
  </div>
  <div class="fullTable">
    <el-table
            ref="multipleTableRef"
            :data="curData"
            border
            style="width: 90%; max-height: 400px;"
            @selection-change="handleSelectionChange"
    >
      <el-table-column :selectable="isDisabled" type="selection" width="60"></el-table-column>
      <el-table-column property="name" label="姓名" width="95"></el-table-column>
      <el-table-column property="dept" label="部门" width="139"></el-table-column>
      <el-table-column property="post" label="岗位" width="138"></el-table-column>
      <el-table-column property="phone" label="手机号码" width="140"></el-table-column>
      <el-table-column property="status" label="状态" width="90"></el-table-column>
      <el-table-column property="entryDate" label="入职时间" width="145"></el-table-column>
      <el-table-column property="formalDate" label="转正时间" width="145"></el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template #default="scope">
          <el-button link type="primary" size="small"
                     @click="updateEmployee(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary"
                     @click="confirmSingleDelete(scope.row.workerId)"
                     size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <my-pagination :totalSize="totalSize"
                   :pageSize="pageSize"
                   :cur="cur"
                   :totalPage="totalPage"></my-pagination>
    <my-dialog :dialogState="dialogProbation"
               :row="row"
               :statusList="statusList"
               :depts="depts"
               :formLabelWidth="$store.state.formLabelWidth"
               :dropLabelWidth="$store.state.dropLabelWidth"
               mode="4"></my-dialog>
  </div>
</template>

<script>
  import MyDialog from '@/components/dialogs/myDialog/MyDialog'
  import MySearch from '@/components/mySearch/MySearch'
  import MyPagination from '@/components/myPagination/MyPagination'
  import {getNowDate} from "../../../../plugins/utils";
  import {myMixin} from "../../../../plugins/mixin";

  export default {
    name: "BecomeFullMember",
    mixins: [myMixin],
    data() {
      return {
        becomeFullArray: [],
        dialogProbation: false,
        row: {},
      }
    },
    methods: {
      /* 设置已经转正的禁选，不能再次转正 */
      isDisabled(row, index) {
        return row.formalDate == null;
      },
      /* 多选框状态改变 */
      handleSelectionChange(arr) {
        this.becomeFullArray = arr;
      },
      /* 展示所有曾有过试用期的员工信息 */
      async showProbation() {
        let result = await this.$request('/employee/list');
        this.tableData = [];
        for (const item of result.data) {
          if (item.visibility === '2' && item.isTry === '2' && item.status !== "已离职") {
            this.tableData.push(item);
          }
        }
      },
      /* 获取所有选中的员工编号 */
      async getBecomeFullWorkerIds() {
        const ids = [];
        for (const item of this.becomeFullArray) {
          ids.push(item.workerId);
        }
        return ids;
      },
      /* 确认转正 */
      async confirmBecomeFull() {
        const ids = await this.getBecomeFullWorkerIds();
        if (ids.length > 0) {
          this.$confirm('确定将已选择员工转为正式员工?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          }).then(() => {
            this.becomeFull(ids);
            this.$message({
              type: 'success',
              message: '转正完成!',
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
        }
      },
      /* 转正更新数据库 */
      async becomeFull(ids) {
        console.log(getNowDate())
        await this.$request('/employee/handlebecomefull', {
          becomeFulls: ids,
          formalDate: getNowDate()
        });
        await this.showProbation();
        this.changePage(this.cur);
      },
      /* 根据员工姓名搜索 */
      async search(name) {
        let result = await this.$request("/employee/searchbyistry", {
          name
        });
        this.tableData = result.data;
        this.changePage(1);
      },
      /* 单个删除（离职）确认 */
      confirmSingleDelete(workerId) {
        this.$confirm('此操作将删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.singleDelete(workerId);
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      },
      /* 单个删除（离职） */
      async singleDelete(workerId) {
        let res = await this.$request('/employee/singlequit', {
          workerId
        });
        await this.showProbation();
        this.changePage(this.cur);
      },
      /* 编辑员工信息 */
      updateEmployee(row) {
        console.log("click", row);
        this.dialogProbation = true;
        this.row = row;
      },
      /* 更新试用期员工信息 */
      async updateProbation() {
        let str = this.$qs.stringify(this.row);
        let res = await this.$request('/employee/updateprobation?' + str);
        console.log(res);
        await this.showProbation();
        this.changePage(this.cur);
        this.dialogProbation = false;
      }
    },
    components: {
      MyDialog,
      MySearch,
      MyPagination
    },
    async mounted() {
      console.log("BecomeFullMember.vue created!");
      await this.showProbation();
      this.curData = this.tableData.slice(0, this.pageSize);
      // MyPagination
      this.$bus.on("changePageNumber", (cur) => {
        this.changePage(cur);
      });
      // MySearch
      this.$bus.on("searchByName", (name) => {
        this.search(name);
      });
      // MyDialog
      this.$bus.on("confirmOperation", (mode) => {
        this.updateProbation();
      });
      this.$bus.on('changeDialogState', (mode) => {
        this.dialogProbation = false;
      });
    }
  }
</script>

<style scoped>
  .fullOperation {
    display: flex;
    justify-content: space-between;
    padding: 0 80px 0 30px;
  }

  .fullTable {
    margin-left: 30px;
  }
</style>

